const { Tabs, Icon, Radio, Timeline } = antd;
const TabPane = Tabs.TabPane;

function callback(key) {
  console.log(key);
}


class Demo extends React.Component {
  state = { size: 'small' };
  onChange = (e) => {
    this.setState({ size: e.target.value });
  }
  render() {
    const { size } = this.state;
    return (
      <div className="card-container">
        <Radio.Group value={size} onChange={this.onChange} style={{ marginBottom: 16 }}>
          <Radio.Button value="small">Small</Radio.Button>
          <Radio.Button value="default">Default</Radio.Button>
          <Radio.Button value="large">Large</Radio.Button>
        </Radio.Group>
        <Tabs defaultActiveKey="1" size={size} type="line">
          <TabPane tab="Tab 1" key="1">
            <Timeline>
              <Timeline.Item color="green">Create a services site 2015-09-01</Timeline.Item>
              <Timeline.Item color="green">Create a services site 2015-09-01</Timeline.Item>
              <Timeline.Item color="red">
                <p>Solve initial network problems 1</p>
                <p>Solve initial network problems 2</p>
                <p>Solve initial network problems 3 2015-09-01</p>
              </Timeline.Item>
              <Timeline.Item>
                <p>Technical testing 1</p>
                <p>Technical testing 2</p>
                <p>Technical testing 3 2015-09-01</p>
              </Timeline.Item>
            </Timeline>
          </TabPane>
          <TabPane tab="Tab 2" key="2">Content of tab 2</TabPane>
          <TabPane tab="Tab 3" key="3">Content of tab 3</TabPane>
        </Tabs>
      </div>
    );
  }
}


ReactDOM.render(
  <Tabs defaultActiveKey="1" onChange={callback} type="card">
    <TabPane tab={<span><Icon type="apple" />Tab 1</span>} key="1">Content of Tab Pane 1</TabPane>
    <TabPane tab="Tab 2" disabled key="2">Content of Tab Pane 2</TabPane>
    <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
  </Tabs>
  , document.getElementById('tabs1'));

ReactDOM.render(<Demo />, document.getElementById('tabs2'));